<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" href="css/dialog.css">
</head>

<body>
    <div class="dialog" id="box">
        <div class="dialog-title" id="drop">
            <span>注册信息（可以拖曳）</span>
            <div class="dialog-close" id="close">×</div>
        </div>
        <div class="dialog-body">
        </div>
    </div>
    <script>
        // 功能一 点击x 关闭对话框
        $("#close").on("click", function() {
                $("#box").css("display", "none");
            })
            //鼠标点击 title 可以移动  其他区域不能点击移动
        $("#drop").on("mousedown", function(e) {
            var x = e.pageX - $("#box").offset().left;
            var y = e.pageY - $("#box").offset().top;
            $(document).on("mousemove", move); //移动函数 给对话框动态赋值

            function move(e) {
                $("#box").css({
                    left: e.pageX - x + "px",
                    top: e.pageY - y + "px"
                })
            }
            //在这个点击事件中 
            //给文档绑定一个鼠标弹起事件 触发后移除移动事件
            $(document).on("mouseup", function() {
                $(document).off("mousemove", move);
            });
        })
    </script>
</body>

</html>